<script setup lang="ts">

</script>

<template>

  <div class="bg-white text-dark">
  <!-- 导航栏 - 第一行 -->
  <header id="navbar"
          class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-2">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-blue-400 flex items-center justify-center">
          <i class="fa fa-cube text-white text-xl"></i>
        </div>
        <span class="text-xl font-bold  from-primary to-blue-500 text-gradient">CodeCraft</span>
      </a>

      <!-- 导航菜单 - 桌面端 -->
      <nav class="hidden md:flex items-center gap-8">
          <router-link to="/" class="nav-link">首页</router-link>
        <a href="#" class="text-shadow-sky-500">首页</a>
        <a href="#services" class="font-medium hover:text-primary transition-colors">核心服务</a>
        <a href="#tech" class="font-medium hover:text-primary transition-colors">技术领域</a>
        <a href="#tools" class="font-medium hover:text-primary transition-colors">工具商城</a>
        <a href="#creative" class="font-medium hover:text-primary transition-colors">创意对接</a>
        <a href="#about" class="font-medium hover:text-primary transition-colors">关于我们</a>
      </nav>

      <!-- 登录/注册按钮 -->
      <div class="flex items-center gap-4">
        <a href="#login"
           class="hidden md:block px-4 py-2 text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors">登录</a>
        <a href="#register"
           class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg">免费加入</a>

        <!-- 移动端菜单按钮 -->
        <button id="menuBtn" class="md:hidden text-dark text-xl">
          <i class="fa fa-bars"></i>
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
  </header>

  </div>

</template>

<style scoped>
@import 'tailwindcss';

</style>